import type { CSSProperties } from 'react'
import { ErrorBlock, List, Tag, Card } from '@/components/base'
import { Typography } from '@/components/typography'
import { Flex } from '@/components/flex'
import { List as VirtualizedList, AutoSizer } from 'react-virtualized'
import { useElementResize } from '@/utils/hooks'
import { UserOutlined, ClockCircleOutlined } from '@ant-design/icons'
import styles from './index.module.less';
import React from 'react'
import { PageController } from '../../page-controller'
import { useObserver } from 'mobx-react-lite'
import { useNavigate } from 'react-router-dom'
import * as dataDictionary from "@shared/constant/dataDictionary";
import { toCurrency } from '@/utils/funs'

const { Text } = Typography

export function ServiceList() {
    const navigate = useNavigate();
    const pageController = React.useContext(PageController.Context);
    const data = useObserver(() => pageController.data);
    const { onRef, height } = useElementResize<HTMLDivElement>();

    const rowRenderer = React.useCallback(function ({
        index,
        key,
        style,
    }: {
        index: number
        key: string
        style: CSSProperties
    }) {
        const item = data[index];
        return (
            <div key={key} style={style} className={styles['service-item']}
                onClick={() => {
                    navigate(`/services-detail?id=${item?.id}`);
                }}
            >
                <Card className={styles['service-card']}>
                    <Flex vertical gap={2}>
                        {/* 标题行 */}
                        <Flex align='center' justify='space-between' gap={8} >
                            <Text size={16} strong>{item?.name}</Text>
                            <Flex gap={8} align='center'>
                                <Tag round color='#bbb' fill='outline' style={{ color: '#000' }}>
                                    {item?.code}
                                </Tag>
                                <Tag round color={item?.status === dataDictionary.ServiceStatus.ENABLED ? '#16a34a' : '#ff4d4f'}>
                                    {item?.status === dataDictionary.ServiceStatus.ENABLED ? '启用' : '禁用'}
                                </Tag>
                            </Flex>
                        </Flex>

                        {/* 描述 */}
                        <Text size={12} style={{ lineHeight: '1.4', marginBottom: 6 }} ellipsis={1}>
                            {item?.description}
                        </Text>

                        {/* 服务详情 */}
                        <Flex gap={12} align='center' justify='center' style={{ marginBottom: 12 }}>
                            <Flex gap={4} align='center'>
                                <UserOutlined style={{ fontSize: 12, color: '#666' }} />
                                <Text size={12} type='secondary' style={{ lineHeight: 'unset' }} >{dataDictionary.serviceClassificationStr[item?.category]}</Text>
                            </Flex>
                            <Flex gap={4} align='center'>
                                <ClockCircleOutlined style={{ fontSize: 12, color: '#666' }} />
                                <Text size={12} type='secondary' style={{ lineHeight: 'unset' }} >{item?.duration}分钟</Text>
                            </Flex>
                            <Flex gap={4} align='center'>
                                <Text size={12} type='secondary' style={{ lineHeight: 'unset' }} >护理师要求: {dataDictionary.nurseLevelStr[item?.technicianLevel]}</Text>
                            </Flex>
                        </Flex>

                        {/* 价格信息 */}
                        <Flex className={styles['price-info']} >
                            <Flex vertical align='center' >
                                <Text size={14} strong style={{ color: '#1890ff' }}>{toCurrency(item?.cashPrice, '')}</Text>
                                <Text size={12} type='secondary'>项目定价</Text>
                            </Flex>
                            <Flex vertical align='center'>
                                <Text size={14} strong style={{ color: '#16a34a' }}>{toCurrency(item?.cardPrice)}</Text>
                                <Text size={12} type='secondary'>划卡金额</Text>
                            </Flex>
                            <Flex vertical align='center'>
                                <Text size={14} strong style={{ color: '#fa8c16' }}>{toCurrency(item?.integral, '')}</Text>
                                <Text size={12} type='secondary'>积分</Text>
                            </Flex>
                        </Flex>

                        {/* 统计信息 */}
                        <Flex className={styles['price-info']}>
                            <Flex vertical align='center'>
                                <Text size={14} strong>**</Text>
                                <Text size={12} type='secondary'>使用次数</Text>
                            </Flex>
                            <Flex vertical align='center'>
                                <Text size={14} strong>¥***.**</Text>
                                <Text size={12} type='secondary'>累计收入</Text>
                            </Flex>
                        </Flex>
                    </Flex>
                </Card>
            </div>
        )
    }, [data, navigate])

    // 更精确的滚动到底部检测
    const handleScroll = React.useCallback(({ clientHeight, scrollHeight, scrollTop }: {
        clientHeight: number;
        scrollHeight: number;
        scrollTop: number;
    }) => {
        // 当滚动条差10像素到底部的时候
        if (scrollHeight - scrollTop - clientHeight < 10) {
            pageController.page++;
            pageController.query();
        }
    }, [pageController]);

    if (data?.length === 0) {
        return <ErrorBlock status='empty' title='暂无数据' description='点击右上角新建服务' />
    }

    return (
        <div ref={onRef} style={{ flex: 1, overflow: 'hidden' }} className={styles['service-list']} >
            <List style={{ height: '100%' }} >
                <AutoSizer disableHeight>
                    {({ width }: { width: number }) => (
                        <VirtualizedList
                            rowCount={data?.length}
                            rowRenderer={rowRenderer}
                            width={width}
                            height={height}
                            rowHeight={230}
                            overscanRowCount={5}
                            onScroll={handleScroll}
                            scrollToAlignment="start"
                        />
                    )}
                </AutoSizer>
            </List>
        </div>
    )
} 